<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<ul class="list">
			<li class="item">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>

</html>

<style type="text/css">
	/* 使用flex布局,使li元素横向排列,奇数的li顶部对齐,偶数的li底部对齐 */
	* {
		margin: 0;
		padding: 0;
	}
	ul {
		margin: 10px auto;
		width: 600px;
		height: 100px;
		list-style: none;
		border: 1px solid #999;
		background: #EFEFEF;
		/*ste1*/
		display: flex;
		/* 水平对齐方式*/
		/*flex-start左对齐,flex-end右对齐,center中间对齐*/
		/*space-between两端对齐,space-around元素左右都有空白*/
		justify-content: space-around;
		/*垂直对齐flex-start顶部对齐,flex-end底部对齐,center,居中对齐*/
		align-items: center;
	}
	li {
		height: 50px;
		width: 100px;
		align-items: flex-start;
		border: 1px solid green;
		line-height: 50px;
		text-align: center;
	}
	/*奇数li顶部对齐*/
	li:nth-child(odd) {
		align-self: flex-start;
	}
	/*偶数li底部对齐*/
	li:nth-child(even) {
		align-self: flex-end;
	}
	li.item {
		/*单独进行设置,会覆盖父元素的align-items*/
		align-self: center;
	}
</style>